<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="10_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="10_script.js"></script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Walt Whitman's Broadway</title>
    <link rel="stylesheet" href="10_poem.css">
  </head>
  <body>
    <div class="container">
      <h1><em>Broadway</em> by Walt Whitman</h1>
      <div id="intro">
        <p>Welcome to the page for Walt Whitman's poem <em>Broadway</em>. Click on elements to see more information about them.</p>
      </div>
      <div id="poem">
      </div>
      <div id="info">
      </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="10_poem.js"></script>
  </body>
</html>

//Part 1 - Define the extra information section for the poem
$("#info").html("<p>Extra info will go here.</p>");

// Part 2 - Display the poem and allow for clicking on words
$.getJSON("poem.json", function(data){ // data variable is the JSON object
  let poemText; // Define a new variable to hold all text
  poemText = "<blockquote><p>"; // Open the starting tags
  // Now you can iterate (map) over the data variable’s .lines property:
  data.lines.map(function(line){ // We get a variable, line
    // Define a blank lineText.
    let lineText = "";
    // Now iterate over each line. This part should be familiar to you from before
    line.map(function(word){
      let wordString;
      wordString = word.text;
      if (word.info){
        wordString = "<a href='#' data-info='" + word.info + "'>" + wordString + "</a>";
      }
      lineText = lineText + wordString + " "; // Add the word to the lineText variable with spacing
    });
    // Add lineText with a line break to the poemText
    poemText = poemText + lineText + "<br/>";
  });
  // Close the poemText tags
  poemText = poemText + "</p></blockquote>";
  // Replace the content of #poem
  $("#poem").html(poemText);
  // Now that we have the data, we can add the click event to the poem
  $("#poem a").click(function(){
    let infoText, clickedWord, clickedInfo;
    clickedWord = $( this ).text();
    // .data("info") looks for the data-info HTML attribute
    clickedInfo = $( this ).data("info");
    infoText = clickedInfo;
    $("#info").html(infoText);
  });
}); // Close the getJSON method and callback function

$("#noShow").hide();

$("h1").html("The Best Jokes Ever!");

$("#joke").append("<p>Q. What do you call a fake noodle? <br /> A. An impasta</p>");

$("#toggleJokes").css({
    "background-color": "orange",
    "color": "white",
    "font-size": "20px",
    "padding": "10px",
    "border-radius": "5px",
    "border": "2px solid black",
    "margin": "10px"
});

$("#toggleJokes").click(function() {
    $("#joke").toggle();
  });

body {
    background-color: rgb(118, 92, 120);
}

h1 {
    font-size: 50px;
    font-weight: bold;
}

p {
    font-size: 30px;
}

.formatText {
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    white-space: pre-line;
}

#joke {
    border: 5px solid rgb(16, 29, 55);
    background-color: rgb(118, 125, 158);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    color: rgb(255, 230, 204);
}

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="11_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="11_script.js"></script>
  </body>
</html>

let poemMap;
poemMap = L.map("map");

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(poemMap);

poemMap.setView([40.7128, -74.0060], 16);

const timesSquare = L.marker([40.7580, -73.9855]).addTo(poemMap);

timesSquare.bindPopup("<b>Times Square</b>");

const circle = L.circle([40.7580, -73.9855], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(poemMap);

const polyline = L.polyline([
    [40.7580, -73.9855],
    [40.7486, -73.9840]
], {
    color: 'blue'
}).addTo(poemMap);

polyline.bindPopup("<b>Times Square to the Graduate Center</b>");

circle.bindPopup("I'm a circle!");

const latLng = timesSquare.getLatLng();
console.log(latLng.lat);
console.log(latLng.lng);

poemMap.panTo(timesSquare.getLatLng());

poemMap.on('click', function(e) {
    const latLng = e.latlng;
    console.log(latLng.lat);
    console.log(latLng.lng);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Walt Whitman's Broadway</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
    integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
    crossorigin=""></script>
    <link rel="stylesheet" href="11_poem.css">
  </head>
  <body>
    <div class="container">
      <h1><em>Broadway</em> by Walt Whitman</h1>
      <div id="intro">
        <p>Welcome to the page for Walt Whitman's poem <em>Broadway</em>. Hover over elements to see more information about them.</p>
      </div>
      <div id="poem"> </div>
      <div id="info"></div>
      <h2>Map of New York</h2>
      <div id="map"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="11_map.js"></script>
    <script src="11_poem.js"></script>
  </body>
</html>

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="12_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h2><a href="12_nyc-data.html">NYC Neighborhoods</a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="12_script.js"></script>
  </body>
</html>

#map { 
    height: 600px; 
    width: 75%;
}

#neighborhoods {
    columns: 100px 3
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NYC Neighborhoods</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
    crossorigin=""/>
    <link rel="stylesheet" href="12_nyc-data.css">
   <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
   <script src="nycneighborhoods.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>NYC Neighborhoods</h1>
      <a href = "https://data.beta.nyc/dataset/pediacities-nyc-neighborhoods/resource/35dd04fb-81b3-479b-a074-a27a37888ce7" alt="Data Source">Here's the source for NYC neighborhood boundaries.</a>
      <div id="map"></div>
      <button id="pan-to-flatbush">Pan to Flatbush</button>
      <div id ="neighborhoods"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="12_nyc-data.js"></script>
  </body>
</html>

let nycMap;
nycMap = L.map("map");

// create tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(nycMap);

nycMap.setView([40.7128, -74.0060], 16);

L.geoJSON(nyc).addTo(nycMap);

// add some fill color to the map
L.geoJSON(nyc, {
    style: function(feature) {
        return {
            color: "blue",
            fillColor: "yellow",
            fillOpacity: 0.5
        };
    }
}).addTo(nycMap);

// show each borough on the map
L.geoJSON(nyc, {
    onEachFeature: function(feature, layer) {
        layer.bindPopup("<h3>" + feature.properties.borough + "</h3> <hr> <h3>" + feature.properties.neighborhood + "</h3>");
    }
}).addTo(nycMap);

$("#pan-to-flatbush").click(function() {
    // find flatbush neighborhood property in the dataset
    let flatbush = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === "Flatbush";
    });
    console.log(flatbush);
    // find the coordinates of flatbush property
    let coordinates = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === "Flatbush";
    }).geometry.coordinates;
    console.log(coordinates);
    nycMap.panTo(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0]));
});

// get a list of all the neighborhoods in the dataset
let neighborhoods = nyc.features.map(function(feature) {
    return feature.properties.neighborhood;
}).filter(function(neighborhood) {
    return neighborhood !== "";
}).sort();
console.log(neighborhoods);

// display all the neighborhoods in the neighborhoods div
neighborhoods.forEach(function(neighborhood) {
    $("#neighborhoods").append("<a href ='#'><li>" + neighborhood + "</li></a>");
    // display in columns
    if (neighborhoods.indexOf(neighborhood) % 4 === 0) {
        $("#neighborhoods").append("<br>");
    }
});

// if the neighborhood is clicked, find the neighborhood on the map and pan to it
$("#neighborhoods").on("click", "li", function() {
    let neighborhoodText = $(this).text(); // get the text of the neighborhood
    let coordinates = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === neighborhoodText; //check if the text matches the neighborhood in the dataset
    }).geometry.coordinates; // get the coordinates of the neighborhood
    nycMap.panTo(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0]));
    // zoom in
    nycMap.setZoom(16);
    // add a marker to the neighborhood polygon
    L.marker(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0])).addTo(nycMap);
    // add a popup to the marker
    L.marker(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0])).bindPopup("<h3>" + neighborhoodText + "</h3>").addTo(nycMap);
});

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="8_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h1>This is my project!</h1>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="8_script.js"></script>
  </body>
</html>

// alert('My project is going to be awesome!');

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="9_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="9_script.js"></script>
  </body>
</html>

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <h1>This is my project!</h1>
    <script src="script.js"></script>
  </body>
</html>